<script setup>
// 引入 api
import { computed, ref } from "vue"

// 动态绑定
const text = ref('')

// 计算属性
const content = computed((() => {
    if (text.value.trim() === '') {
        btnClass.value['invalid'] = true
    } else {
        btnClass.value['invalid'] = false
    }
}))


// 类对象
const btnClass = ref({
    "focused": false,
    "invalid": false
})

// 获取焦点函数
function f(index) {
    btnClass.value['focused'] = true
}

// 失去焦点函数
function b() {
    btnClass.value['focused'] = false
}
</script>

<template>
    <!-- 输入框 -->
    {{ content }}
    <input type="text" :class="btnClass" v-model="text" @focus="f" @blur="b" />
</template>